<template>
  <div class="header-div">
    <!--<header class="blog-header py-3">-->
      <!--<div class="row flex-nowrap justify-content-between align-items-center">-->
        <!--<div class="col-4 pt-1">-->
          <!--<a class="text-muted" href="#">便民超市</a>-->
        <!--</div>-->
        <!--<div class="col-4 text-center">-->
          <!--<a class="blog-header-logo text-dark" href="#">超省钱</a>-->
        <!--</div>-->
        <!--<div class="col-4 d-flex justify-content-end align-items-center">-->
          <!--<a class="text-muted" href="#">-->
            <!--<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"-->
                 <!--fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
                 <!--class="mx-3">-->
              <!--<circle cx="10.5" cy="10.5" r="7.5"></circle>-->
              <!--<line x1="21" y1="21" x2="15.8" y2="15.8"></line>-->
            <!--</svg>-->
          <!--</a>-->
          <!--<a class="btn btn-sm btn-outline-secondary" href="#">登录</a>-->
        <!--</div>-->
      <!--</div>-->
    <!--</header>-->
    <!--<div class="nav-scroller py-1 mb-2">-->
      <!--<nav class="nav d-flex justify-content-between">-->
        <!--<a class="p-2 text-muted" href="#">超市</a>-->
        <!--<a class="p-2 text-muted" href="#">商品劵</a>-->
        <!--<a class="p-2 text-muted" href="#">众筹</a>-->
        <!--<a class="p-2 text-muted" href="#">加盟</a>-->
      <!--</nav>-->
    <!--</div>-->
    <header>
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">超省钱</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
                aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">折扣券 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">便利超市</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">众筹</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="搜索" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </div>
      </nav>
    </header>
    <hr />
  </div>
</template>

<script>
  import { mapState } from 'vuex';

  export default {
    name: 'head-info',
    computed:{

    },
    data () {
      return {
      }
    },
    methods:{
    },
    mounted(){
    }
  }
</script>

<style scoped>
  .blog-header {
    line-height: 1;
    border-bottom: 1px solid #e5e5e5;
  }

  .blog-header-logo {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
  }

  .blog-header-logo:hover {
    text-decoration: none;
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
  }

</style>
